<template>
    <h1>form数据绑定，- 登录</h1>
    <hr>
    <p>
        用户名：<input v-model="uname" type="text">
        {{ uname }}
    </p>
    <p>
        密码：<input v-model="pass" type="password">
        {{ pass }}
    </p>
    <p>
        <button @click="submitData">提交</button>
    </p>
    <hr>
    性别：
    <label>
        <input type="radio" value="1" v-model="sex">男
    </label>
    <label>
        <input type="radio" value="2" v-model="sex">女
    </label>
    <label>
        <input type="radio" value="3" v-model="sex">保密
    </label>
    {{ sex }}
    <hr>
    多选，
    <label>
        <input type="checkbox" value="apple" v-model="friutArr"> 苹果
    </label>
    <label>
        <input type="checkbox" value="banana" v-model="friutArr"> 香蕉
    </label>
    <label>
        <input type="checkbox" value="group" v-model="friutArr"> 葡萄
    </label>
    {{ friutArr }}
</template>

<script>
import { ref } from 'vue';
export default{
    setup(){
        const uname = ref("admin");
        const pass = ref("1234");

        //提交
        const submitData = ()=>{
            console.log(uname.value);
            console.log(pass.value);
        }

        //性别
        const sex = ref(2);
        //爱好
        const friutArr = ref(["banana"]);
        return {
            uname,pass,submitData,sex,friutArr
        }
    }
}



</script>

<style lang="scss" scoped>

</style>